<template>
<div>
  <div style="display: flex;  align-items: center;  height: 45px; background-color: white;">
        <span style="width: 5%">药品名称：</span>
        <el-input
          style="width: 10%"
          v-model="queryParams.medicinesName"
          placeholder="请输入药品名称"
          clearable
        
          
        />
    
  
  
   &nbsp;&nbsp; 
        <el-button type="primary" icon="el-icon-search" size="medium " @click="handleQuery">搜索</el-button>
         &nbsp;&nbsp;
        <el-button icon="el-icon-refresh" size="medium " @click="resetQuery">重置</el-button>
     </div>
 

 

    <el-table :data="inventoryList" >
    
      <el-table-column label="序号" align="center" prop="inventoryId" />
      <el-table-column label="药品名称" align="center" prop="dzmHisMedicines.medicinesName" />
      <!-- <el-table-column label="采购单编号" align="center" prop="batchesOfInventoryNumber" /> -->
      <el-table-column label="生产厂家" align="center" prop="dzmHisMedicines.producter" />
      <el-table-column label="药品分类" align="center" prop="dzmHisMedicines.medicinesClass" />
      <el-table-column label="库存" align="center" prop="inventoryNum" />
      
     
      <el-table-column label="批发价" align="center" prop="inventoryTradePrice" />
      <el-table-column label="处方价" align="center" prop="inventoryPrescriptionPrice" />
      <el-table-column label="批发额" align="center" prop="inventoryTradeTotalAmount" />
      <el-table-column label="处方额" align="center" prop="inventoryPrescriptionTotalAmount" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          
          
          <el-button
           
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleChange(scope.row)"
           
          >调价</el-button>
        
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页 -->
   <el-pagination :page-sizes="[5, 10, 15]" :page-size="queryParams.pageSize" :total="total" :current-page="queryParams.pageNum"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>


    
   
    <!-- 查看采购详情 -->
      <!-- 药品修改弹窗 -->
<el-dialog
  :title="title"
  :visible.sync="open"
  width="30%"
>


 <el-form  :model="form"  label-width="80px" label-position="left">
        <el-form-item label="药品名称" style="white-space: nowrap;">
       {{form.dzmHisMedicines && form.dzmHisMedicines.medicinesName}} 
        </el-form-item>
        <el-form-item label="库存" >
         {{form.inventoryNum}}
        </el-form-item>
        <el-form-item label="批发价:" >
         {{form.inventoryTradePrice}}
        </el-form-item>
        <el-form-item label="处方价" >
           
            <el-input placeholder="请输入处方价" v-model="setPurchasePrescriptionPrice" class="dialog-input"  oninput="value=value.replace(/[^\d.]/g,'')">
            
              <el-select v-model="prescriptionPriceType" slot="append" placeholder="请选择" style="width:200px" >
                <el-option 
                  v-for="(item,index) in prescriptionPriceTypeList"
              :key="index"
              :label="item.label"
              :value="item.value">
                </el-option>
              
              </el-select>
            </el-input>
        </el-form-item>
      

      
       
    </el-form>
 

  

  <span slot="footer" class="dialog-footer ">

     <el-tooltip class="tooltip" effect="dark" content="未设定处方价" placement="top" :disabled="!(setPurchasePrescriptionPrice=='')">
  <div >
    <el-button type="primary" @click="handleUpdate" class="dialog-input"  :disabled="setPurchasePrescriptionPrice==''">应用</el-button>
</div>
    </el-tooltip>

  </span>
</el-dialog>
  </div>
</template>
<script>
 import {getInventorys,changePrice} from '@/api/medicines.js'

export default {
  name: "Kccx",
 data() {
    return {
     setInventoryNum:null,
      setPurchasePrescriptionPrice: '',//计算处方价
      prescriptionPriceType: 1,// 处方价设定方式
    
    form:{},
      // 总条数
      total: 0,
      // 批次库存表格数据
      inventoryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        medicinesName: null
      },
         //处方价设定方式
       prescriptionPriceTypeList:
        [{
            value: 1,
            label: '批发价+（金额）'
          }, {
            value: 2,
            label: '批发价*（%比例）'
          }]
        ,
     
      
    };
  },
  created() {
   
    this.getList();
    
  },
  methods: {
   

    /** 查询库存列表 */
    getList() {
   
      
     
      getInventorys(this.queryParams).then(response => {
        this.inventoryList = response.data.list;
        this.total = response.data.total;
      
      });
     
    },
         // //分页/
      // 每页显示多少条
      handleSizeChange(val) {
        // 改变每页显示的条数 
        this.queryParams.pageSize=val
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.queryParams.pageNum=1
        this.getList();
      
      },
      // 现在显示当前页的第几页
      handleCurrentChange(val) {
        // 改变默认的页数
        this.queryParams.pageNum=val,
        this.getList();
       
      },



 
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
   
      
         this.queryParams.pageSize=10,
              this.queryParams.medicinesName=null;

      this.handleQuery();
    },
     /** 查看按钮操作 */
    handleChange(row) {
      this.title="调整处方价"
        this.open=true;
       this.form=row;
// this.form=
   
  
    },
      handleUpdate(){

      
       
        let newInventoryPrescriptionPrice;
            if(this.prescriptionPriceType==1){
      
  newInventoryPrescriptionPrice=parseFloat(this.setPurchasePrescriptionPrice)+parseFloat(this.form.inventoryTradePrice);

        }else{
        newInventoryPrescriptionPrice=(this.setPurchasePrescriptionPrice/100+1)*this.form.inventoryTradePrice;

   

        }

          changePrice(this.form.hmrId,newInventoryPrescriptionPrice).then(response => {
          this.setPurchasePrescriptionPrice='';
          this.$message({
          message: '调价成功',
          type: 'true'
        });
        this.open=false
        this.getList();
        });
        
      }
    
    
    },
 
  
   
   
  
  

};
</script>


<style>

.dialog-input {
  width: 100%;
}
/* 路由的简单过渡动画效果 */
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
.v-enter-active {
  transition: 0.3s;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: 0.3s;
}
</style>
